<template>
  <div class="databoard-container">
    <h2>个人信息</h2>
    <el-form
      :model="studentInfo"
      label-width="100px"
      ref="studentForm"
      class="personal-info"
    >
      <el-form-item label="学号" v-if="studentInfo.className != null">
        <span>{{ studentInfo.username }}</span>
      </el-form-item>
      <el-form-item label="用户名" v-if="studentInfo.className == null">
        <span>{{ studentInfo.username }}</span>
      </el-form-item>
      <el-form-item label="姓名">
        <span>{{ studentInfo.name }}</span>
      </el-form-item>
      <el-form-item label="密码">
        <span v-if="showPassword">{{ studentInfo.password }}</span>
        <el-button
          type="primary"
          size="mini"
          @click="togglePasswordVisibility"
          >{{ showPassword ? "隐藏密码" : "显示密码" }}</el-button
        >
        <el-button type="primary" size="mini" @click="editPassword"
          >修改密码</el-button
        >
      </el-form-item>
      <el-form-item label="班级" v-if="studentInfo.className != null">
        <span>{{ studentInfo.className }}</span>
      </el-form-item>
      <el-form-item label="年级" v-if="studentInfo.gradeName != null">
        <span>{{ studentInfo.gradeName }}</span>
      </el-form-item>
      <el-form-item label="学院" v-if="studentInfo.collegeName != null">
        <span>{{ studentInfo.collegeName }}</span>
      </el-form-item>
      <el-form-item label="专业" v-if="studentInfo.majorName != null">
        <span>{{ studentInfo.majorName }}</span>
      </el-form-item>
    </el-form>
    <!-- 添加或修改操作日志记录对话框 -->
    <el-dialog :visible.sync="open" width="500px" append-to-body>
      <span slot="title">修改密码</span>
      <el-form ref="form" :model="Form" :rules="Rules" label-width="80px">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="Form.password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="Form.password = null">重置</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfoAPI, changePasswordAPI } from "@/api/user";

export default {
  data() {
    return {
      Rules: {
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      Form: {
        password: "",
      },
      open: false,
      studentInfo: {
        username: null,
        name: null,
        password: null,
        className: null,
        gradeName: null,
        collegeName: null,
        majorName: null,
      },
      showPassword: false,
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async submitForm() {
      this.$refs.form.validate(async (flag) => {
        if (!flag) return;
        await changePasswordAPI(this.Form.password);
        this.$message.success("修改成功");
        this.open = false;
        this.getUserInfo();
      });
    },
    async getUserInfo() {
      const res = await getUserInfoAPI();
      this.studentInfo = res.data;
    },
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    editPassword() {
      // 实现修改密码的逻辑
      this.open = true;
    },
  },
};
</script>

<style scoped>
.databoard-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
  font-family: "Arial", sans-serif;
}

.personal-info {
  margin-top: 20px;
}

.el-button {
  margin-left: 10px;
}
</style>
